<template>
  <div class="app">
    <div class="page-tool-item" @click="downloadPdf">下载</div>
    <div class="page-tool-item" @click="downloadPdf">放大</div>
    <div class="page-tool-item" @click="downloadPdf">放大</div>
    <div class="container" ref="fContainerRef">
      <vue-office-docx
           :src="docx2"
           style="height: 100vh;"
           ref="docxRef"
           @rendered="renderedHandler"
           @error="errorHandler"
       />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'

const docx = ref("http://localhost:18802/test.docx")
const docx2 = ref("http://localhost:18802/test2.docx?ss=22")


const docxRef = ref()
const downloadPdf = () => {  docxRef.value.download("test.pdf");}

const  renderedHandler =()=> {
            
            console.log("渲染完成")
        }
        const errorHandler=()=> {
            console.log("渲染失败")
        }

// import { ICardItem } from "./components/type";
// import list from "./config/index";
const fContainerRef = ref<HTMLDivElement | null>(null);
// const column = ref(6);
// const fContainerObserver = new ResizeObserver((entries) => {
//   changeColumn(entries[0].target.clientWidth);
// });

// const changeColumn = (width: number) => {
//   if (width > 960) {
//     column.value = 5;
//   } else if (width >= 690 && width < 960) {
//     column.value = 4;
//   } else if (width >= 500 && width < 690) {
//     column.value = 3;
//   } else {
//     column.value = 2;
//   }
// };

onMounted(() => {
  // fContainerRef.value && fContainerObserver.observe(fContainerRef.value);
});

onUnmounted(() => {
  // fContainerRef.value && fContainerObserver.unobserve(fContainerRef.value);
});

// const getData = (page: number, pageSize: number) => {
//   return new Promise<ICardItem[]>((resolve) => {
//     setTimeout(() => {
//       console.log('aaa',list.slice((page - 1) * pageSize, (page - 1) * pageSize + pageSize));
//       resolve(list.slice((page - 1) * pageSize, (page - 1) * pageSize + pageSize));
//     }, 1000);
//   });
// };
</script>

<style scoped lang="scss">
.app {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  .container {
    width: 90vw;
    height: 90vh;
    border: 1px solid red;
  }

  .test-item {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-radius: 10px;
    animation: MoveAnimate 0.25s; // 添加动画，使其出现时更加丝滑
  }
}

@keyframes MoveAnimate {
  from {
    opacity: 0;
    transform: translateY(200px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
